<template>
  <div class='container app-container'>
    <el-card>
      <!-- 面包屑导航 -->
    <el-breadcrumb v-if="come" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{subObj.name}}</el-breadcrumb-item>
      <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索表单 -->
    <el-form :inline="true" style="margin-top:20px" :model="reqList">
      <el-form-item label="目录名称" prop="directoryName">
        <el-input size="small" v-model="reqList.directoryName"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="reqList.state" placeholder="请选择" size="small">
          <el-option label="已禁用" :value="0"></el-option>
          <el-option label="已启用" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="clear">清除</el-button>
        <el-button type="primary" size="small" @click="screen">搜索</el-button>
      </el-form-item>
      <el-form-item class="right">
         <el-link type="primary" style="margin-right:10px" :underline="false" v-if="come" @click="$router.back()">⬅ 返回学科</el-link>
        <el-button type="success" size="small" icon="el-icon-edit" @click="addList">新增目录</el-button>
      </el-form-item>
    </el-form>

        <!-- 显示表格数据条数 -->
       <el-alert  :title="`数据一共${counts}条`" type="info"  show-icon style="margin-bottom:10px"  :closable="false"></el-alert>
      <!-- 表格 -->
      <el-table :data="dirList" style="width: 100%">
        <el-table-column type="index" :index="indexMothod" label="序号"  width="80"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科"></el-table-column>
        <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template #default="{row}">
              {{row.addDate | formatDate}}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
            <template #default="{row}">
                {{row.state === 1 ? '已启用' : '已禁用'}}
            </template>
        </el-table-column>
        <el-table-column  label="操作">
            <template #default="{row}">
              <!-- {{row}} -->
                <el-link :underline="false" type="primary" @click="onOff(row)">{{row.state === 1 ? '禁用' : '启用'}}</el-link>
                <el-link :underline="false" style="margin:0 5px" :disabled="row.state === 1 ? true : false" @click="edit(row.id)">修改</el-link>
                <el-link :underline="false" :disabled="row.state === 1 ? true : false" @click="del(row.id)">删除</el-link>
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="reqList.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="reqList.pagesize"
      layout="prev, pager, next,sizes, jumper"
      :total="counts">
    </el-pagination>
    </el-card>
    <!-- 对话框组件 -->
    <DirectorysAdd
     :dialogVisible.sync="dialogVisible"
     :isShow="isShow"
      @render="getList"
      ref="refAdd"
      ></DirectorysAdd>
  </div>
</template>

<script>
import { list, changeState, remove, detail } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
export default {
  name: 'dirctorys',
  components: {
    DirectorysAdd
  },
  data () {
    return {
      dirList: [], // 目录列表
      pages: 0, // 总页数
      counts: 0, // 总数居数
      // 发送请求的对象数据
      reqList: {
        pagesize: 10, // 每页多少条数据
        page: 1, // 当前页码
        state: null, // 状态
        subjectID: null, // 学科id
        directoryName: '' // 目录名称
      },
      dialogVisible: false,
      come: false, // 控制元素显示与隐藏的布尔值
      subObj: {}, // 从学科分类跳转传来的参数
      isShow: true, // 子组件输入框显示与隐藏
      editList: {} // 点击修改获取到的当前目录详情
    }
  },
  created () {
    this.getList()
    console.log(this.$route)
    // 判断是否从学科分类跳转来的
    if (this.$route.fullPath.includes('?id')) {
      // console.log('来了老弟')
      this.come = true // 显示隐藏的元素
      // 将学科id存一下,发送请求渲染
      this.reqList.subjectID = this.$route.query.id
      this.getList()
      this.subObj = this.$route.query
    }
  },
  methods: {
    // 获取目录列表数据
    async getList () {
      // console.log(this.reqList)
      const { data } = await list(this.reqList)
      // console.log(data)
      this.dirList = data.items // 将请求回来的目录列表存起来
      console.log(this.dirList)
      this.reqList.pages = data.pages
      this.counts = data.counts
    },
    // 每页条数发生改变触发的函数
    handleSizeChange (val) {
      // 将改变后的条数赋值给data中的pagesize
      this.reqList.pagesize = val
      // console.log(val)
      // 重新渲染表格
      this.getList()
    },
    // 当前页发生改变时触发的函数
    handleCurrentChange (val) {
      // 将改变后的当前页赋值给data中的page
      this.reqList.page = val
      // 重新渲染表格
      this.getList()
    },
    // 自定义索引
    indexMothod (index) {
      // console.log(index)
      return 1 + index + (this.reqList.page - 1) * this.reqList.pagesize
    },
    // 点击清除输入框数据
    clear () {
      this.reqList.directoryName = ''
      this.reqList.state = null
      // 重新渲染表格
      this.getList()
    },
    // 筛选按钮
    screen () {
      // 如果输入框有值才能筛查
      if (this.reqList.directoryName || this.reqList.state === 0 || this.reqList.state === 1) {
      // 渲染列表
        this.getList()
      }
    },
    // 新增目录
    addList () {
      this.$refs.refAdd.title = '新增目录'
      if (this.$route.fullPath.includes('?id')) {
        this.isShow = false
        this.$refs.refAdd.subForm.subjectID = +this.subObj.id
      } else {
        this.isShow = true
      }
      this.dialogVisible = true
    },
    // 禁用/启用
    async onOff (row) {
      // console.log(row)
      if (row.state === 1) {
        row.state = 0
        this.$message.success('已禁用')
      } else {
        row.state = 1
        this.$message.success('已启用')
      }
      // 发送状态请求
      await changeState({ id: row.id, state: row.state })
    },
    // 删除
    async del (id) {
      const str = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      console.log(str)
      if (str !== 'confirm') return this.$message.info('已取消删除')
      await remove({ id })
      // 渲染列表
      this.getList()
    },
    // 修改
    async edit (id) {
      this.$refs.refAdd.title = '编辑目录'
      // 展示对话框
      this.dialogVisible = true
      // 给子组件传当前修改项的id
      this.$refs.refAdd.id = id
      const { data } = await detail({ id })
      // console.log(res)
      this.editList = data
      // 从学科分类跳转过来的,隐藏一个输入框
      this.isShow = false
      // 直接在父组件将数据回显
      this.$refs.refAdd.subForm = data
    }
  }
}
</script>

<style scoped lang='scss'>
    .el-form {
        .right {
          float: right;
        }
    }
    ::v-deep .el-table__header-wrapper {
      border-bottom: 3px solid #ccc;
    }
    .el-pagination {
      margin-top: 20px;
      float: right;
    }
</style>
